<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>上传图片</title>
	<link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		body{
			background: url("./images/background03.png") no-repeat;
     		background-size: 100%;
		}
		.upload-img{
			width: 73.084886%;
			height: 61.315789%;
			margin: 0 auto;
			margin-top: 16%;
			display: none;
		}
		.upload-img img{
			width: 100%;
			height: 100%;
			border-radius: 1rem;
		}
		form{
			display: none;
		}
		.show02{
			width: 38.762887%;
			height: 15.263158%;
			margin: 0 auto;
			margin-top: 2rem;
		}
		.show02 img{
			width:100%;
			height: 100%;
		}
		.show02 div:nth-child(1){
			width: 100%;
			height: 60%;
		}

		.show02 div:nth-child(2){
			width: 100%;
			height: 20%;
			margin-top: 1.4rem;
		}
		.show02 div img{
			width: 100%;
			height: 100%;
		}
		.dialog{
			position: absolute;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(38,39,40,0.9);
			display: none;
		}
		.dialog-content{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: none;
		}
		.dialog-content .icon{
			width: 30.40%;
			height: 10.763158%;
			position: absolute;
			right: 2rem;
			top: 3rem;
		}
		.dialog-content .icon img{
			width: 100%;
			height: 100%;
		}
		.dialog-content .text{
			width: 81.237113%;
			height: 20.526316%;
			margin: 0 auto;
			position: absolute;
			top: 20%;
			left: 9.2%;
			color: #FFFFFF;
			font-size: 2.9rem;
			line-height: 4.2rem;
			font-family: "微软雅黑";
		}
		.xuanzhuan{
			position: absolute;
			margin: 0 auto;
			top: 25%;
			left: 30%;
			display: none;
		}
	</style>
</head>
<body>
	<div class="upload-img">
		<img id="upload_picture" src="./images/upload_picture.png"/>
	</div>
	<div class="show02">
		<div><img id="get_money" src="./images/get_money.png"/></div>
		<div><img id="reset_upload" src="./images/reset_upload.png"/></div>
	</div>
	
	<div class="dialog" id="dialog">
	</div>
	<div class="dialog-content">
		<div class="icon"><img id="reset_upload" src="./images/file.png"/></div>
		<div class="text">将海报分享至微信朋友圈,即可领取现金红包。分享后截图发至“铁投启迪高铁时代广场”官方微信公众平台,还可参与现金红包抽奖</div>
	</div>
	<form id="myform" method="post" action="http://www.aromair.cn/tt/upload_file.php" enctype="multipart/form-data">
		<input id="select_picture" name="file" type="file">
	</form>
	<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		var search = window.location.search;
		$("#upload_picture").attr({"src":"http://www.aromair.cn/tt/upload/"+search.substring(parseInt(search.indexOf("="))+1,search.indexOf("&"))+".png"});

		$(".upload-img").show();
		//适配屏幕
		var body_width = $("body").width();
		var body_height = $("body").height();
		$("body").css({"background-size":body_width+"px "+body_height+"px"});

		//我要领红包
		$("#get_money").click(function(){
			$(".dialog").show();
			$(".dialog-content").show();
		});

		//重新选择图片
		$("#reset_upload").click(function(){
			window.location.href = "gameing.html";
		});

		//点击背景弹框说明消失
		$(".dialog-content").click(function(){
			$(this).hide();
			$(".dialog").hide();
		});

	});
	</script>
</body>
</html>